<template>
  <!-- 商家概览 -->
  <div style="background-color: #6f67f4; padding: 1.5rem; color: white;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div>
        <h2 style="font-size: 1.25rem; font-weight: 700;">广州建材贸易有限公司</h2>
        <p style="color: rgba(255, 255, 255, 0.7); margin-top: 0.25rem;">专注高品质建材供应10年</p>
      </div>
      <div style="text-align: right;">
        <div style="display: flex; align-items: center; justify-content: flex-end;">
          <span style="font-size: 1.5rem; font-weight: 700;">4.8</span>
          <div style="color: #fde047; margin-left: 0.5rem; display: flex;">
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star-half-stroke"></i>
          </div>
        </div>
        <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; margin-top: 0.25rem;">商家评分</p>
      </div>
    </div>
  </div>

  <!-- 商家统计 -->
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem 1rem 1.5rem; background-color: white;">
    <div style="text-align: center;">
      <p style="color: #737373; font-size: 0.875rem;">今日订单</p>
      <p style="font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-top: 0.25rem;">12</p>
    </div>
    <div style="text-align: center;">
      <p style="color: #737373; font-size: 0.875rem;">本月销售额</p>
      <p style="font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-top: 0.25rem;">¥258,000</p>
    </div>
    <div style="text-align: center;">
      <p style="color: #737373; font-size: 0.875rem;">上架商品</p>
      <p style="font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-top: 0.25rem;">128</p>
    </div>
    <div style="text-align: center;">
      <p style="color: #737373; font-size: 0.875rem;">累计评价</p>
      <p style="font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-top: 0.25rem;">326</p>
    </div>
  </div>
  <!-- 商家导航标签页 -->
  <div class="order-tabs-container">
    <div class="flex border-b border-gray-200" style="display: flex;">
      <button
          style="border:none !important;"
          v-for="(tab, index) in tabs"
          :key="index"
          :class="activeTab === index ? 'tab-active' : 'tab-inactive'"
          @click="activeTab = index"
      >
        {{ tab.name }}
        <span v-if="activeTab === index" class="tab-indicator"></span>
      </button>
    </div>

<!--    &lt;!&ndash; 标签页内容区域 &ndash;&gt;-->
<!--    <div class="tab-content">-->
<!--      &lt;!&ndash; 这里可以根据activeTab显示不同内容 &ndash;&gt;-->
<!--      <div v-if="activeTab === 0">全部订单内容区域</div>-->
<!--      <div v-if="activeTab === 1">待服务内容区域</div>-->
<!--      <div v-if="activeTab === 2">进行中内容区域</div>-->
<!--    </div>-->
  </div>
  <div style="padding: 1rem;">
    <!-- 全部订单 -->
    <div id="all-orders" class="tab-content animate-fade-in">
      <div style="display: flex; flex-direction: column; gap: 0.75rem;">
        <!-- 待处理订单 -->
        <div class="order-card">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">现代简约风格全屋定制</h3>
              <p style="font-size: 0.875rem; color: #737373; margin-top: 0.25rem;">订单编号: OD20250616006</p>
            </div>
            <span class="status-badge" style="background-color: #fef9c3; color: #854d0e;">待处理</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-map-marker-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>广州市天河区珠江新城</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-calendar-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>预约时间: 2025-06-18 14:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: var(--primary); font-weight: 700;">¥25,000</span>
              <span style="font-size: 0.875rem; color: #737373;">订单金额</span>
            </div>
            <div style="display: flex; gap: 0.5rem;">
              <button class="btn-secondary" style="font-size: 0.75rem; padding: 0.25rem 0.75rem;">查看</button>
              <button class="btn-primary" style="font-size: 0.75rem; padding: 0.25rem 0.75rem;">处理</button>
            </div>
          </div>
        </div>

        <!-- 已发货订单 -->
        <div class="order-card">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">瓷砖套餐</h3>
              <p style="font-size: 0.875rem; color: #737373; margin-top: 0.25rem;">订单编号: OD20250615008</p>
            </div>
            <span class="status-badge" style="background-color: #dbeafe; color: #1e40af;">已发货</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-map-marker-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>广州市番禺区南村镇</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-calendar-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>预约时间: 2025-06-16 10:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: var(--primary); font-weight: 700;">¥8,600</span>
              <span style="font-size: 0.875rem; color: #737373;">订单金额</span>
            </div>
            <button class="btn-success" style="font-size: 0.75rem; padding: 0.25rem 0.75rem;">确认完成</button>
          </div>
        </div>

        <!-- 已完成订单 -->
        <div class="order-card">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">卫浴套装</h3>
              <p style="font-size: 0.875rem; color: #737373; margin-top: 0.25rem;">订单编号: OD20250614009</p>
            </div>
            <span class="status-badge" style="background-color: #dcfce7; color: #166534;">已完成</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-map-marker-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>广州市越秀区北京路</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-calendar-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>服务时间: 2025-06-15 09:30</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: var(--primary); font-weight: 700;">¥12,300</span>
              <span style="font-size: 0.875rem; color: #737373;">订单金额</span>
            </div>
            <button class="btn-secondary" style="font-size: 0.75rem; padding: 0.25rem 0.75rem;">查看详情</button>
          </div>
        </div>

        <!-- 已取消订单 -->
        <div class="order-card">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">地板套餐</h3>
              <p style="font-size: 0.875rem; color: #737373; margin-top: 0.25rem;">订单编号: OD20250613010</p>
            </div>
            <span class="status-badge" style="background-color: #f5f5f5; color: #404040;">已取消</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-map-marker-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>广州市白云区机场路</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #525252;">
            <i class="fa-solid fa-calendar-alt" style="color: var(--primary); margin-right: 0.25rem;"></i>
            <span>取消时间: 2025-06-13 16:45</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #737373; font-weight: 500;">¥5,800</span>
              <span style="font-size: 0.875rem; color: #737373;">订单金额</span>
            </div>
            <button class="btn-secondary" style="font-size: 0.75rem; padding: 0.25rem 0.75rem;">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

// 订单状态选项卡
const activeOrderTab = ref('pendingPayment');

// 订单数据
const orders = ref([]);

// 商品数据
const products = ref([]);

// 路由实例
const route = useRoute();

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    pendingPayment: '待付款',
    pendingShipment: '待发货',
    shipped: '已发货',
    pendingInstallation: '待安装',
    completed: '已完工'
  };
  return statusMap[status] || '未知状态';
};

// 模拟获取订单数据
const fetchOrders = () => {
  // 这里根据activeOrderTab获取不同状态的订单
  if (activeOrderTab.value === 'pendingPayment') {
    orders.value = [
      {
        id: 1,
        orderNo: 'ORD20230512001',
        createTime: '2023-05-12 14:30',
        status: 'pendingPayment',
        productImage: 'https://picsum.photos/id/1060/200/200',
        productName: '现代简约防滑瓷砖 800x800mm',
        specifications: '灰色 / 哑光 / 10片装',
        price: 128.00,
        quantity: 2
      },
      {
        id: 2,
        orderNo: 'ORD20230511005',
        createTime: '2023-05-11 09:15',
        status: 'pendingPayment',
        productImage: 'https://picsum.photos/id/1067/200/200',
        productName: '智能马桶一体机 全自动冲洗烘干',
        specifications: '白色 / 标准版',
        price: 2899.00,
        quantity: 1
      }
    ];
  } else {
    // 其他状态暂时返回空数组，实际项目中应根据状态请求不同接口
    orders.value = [];
  }
};
const tabs = [
  { name: '订单管理', icon: 'fa-list' },
  { name: '商品管理', icon: 'fa-clock' },
  { name: '营销活动', icon: 'fa-clock' },
  { name: '数据分析', icon: 'fa-clock' },
  { name: '店铺信息', icon: 'fa-spinner' }
];

const activeTab = ref(0);
// 模拟获取商品数据
const fetchProducts = () => {
  products.value = [
    {
      id: 1,
      name: '现代简约防滑瓷砖 800x800mm',
      image: 'https://picsum.photos/id/1060/200/200',
      price: 128.00,
      sales: 128
    },
    {
      id: 2,
      name: '智能马桶一体机 全自动冲洗烘干',
      image: 'https://picsum.photos/id/1067/200/200',
      price: 2899.00,
      sales: 45
    },
    {
      id: 3,
      name: '实木复合地板 12mm厚',
      image: 'https://picsum.photos/id/1048/200/200',
      price: 168.00,
      sales: 89
    },
    {
      id: 4,
      name: 'LED吸顶灯 客厅卧室现代简约',
      image: 'https://picsum.photos/id/1059/200/200',
      price: 299.00,
      sales: 67
    }
  ];
};

onMounted(() => {
  // 初始化数据
  fetchOrders();
  fetchProducts();

  // 监听选项卡变化，重新获取数据
  watch(activeOrderTab, () => {
    fetchOrders();
  });
});
</script>

<style scoped>
.content-auto {
  content-visibility: auto;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.tab-active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

.nav-active {
  color: var(--primary);
}

.btn-primary {
  background-color: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary:hover {
  background-color: rgba(var(--primary), 0.9);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

.btn-secondary {
  background-color: white;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background-color: rgba(var(--primary), 0.05);
}

.btn-danger {
  background-color: #ef4444;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-danger:hover {
  background-color: #dc2626;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

.btn-success {
  background-color: #22c55e;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-success:hover {
  background-color: #16a34a;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

.card-hover {
  transition: all 0.3s;
}

.card-hover:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-0.25rem);
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}

.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.125rem;
  background-color: var(--primary);
  transition: all 0.3s;
}

.order-card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s;
}

.order-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.product-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.nav-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.3s;
}

.nav-pill-active {
  background-color: var(--primary);
  color: white;
}
.order-tabs-container {
  width: 100%;
  /*margin-top: 1rem;*/
}

/* 标签样式 */
.flex button {
  flex: 1;
  padding: 0.5rem 0;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  border: none;
}
button:after{
  border: none;
}
.tab-inactive {
  color: #737373;
  background-color: white;
}

.tab-active {
  color: #3b82f6;
  background-color: #ffffff;
}

/* 标签指示器 */
.tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3b82f6;
  transition: all 0.3s ease;
}

/* 标签内容区域 */
.tab-content {
  padding: 1rem 0;
}

/* 标签切换动画 */
.tab-content > div {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>